<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>My Account - Premium Multipurpose HTML5/CSS3 Theme</title>
    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <!-- FAVICONS -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" th:href="@{/icons/apple-touch-icon-144-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" th:href="@{/icons/apple-touch-icon-114-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" th:href="@{/icons/apple-touch-icon-72-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" th:href="@{/icons/apple-touch-icon-57-precomposed.png}"/>
    <link rel="shortcut icon" th:href="@{/icons/favicon.png}"/>

    <!-- GOOGLE WEB FONTS -->
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">

    <!-- BOOTSTRAP 3.3.7 CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>

    <!-- SLICK v1.6.0 CSS -->
    <link rel="stylesheet" th:href="@{/css/slick-1.6.0/slick.css}"/>

    <link rel="stylesheet" th:href="@{/css/jquery.fancybox.css}"/>
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-compare/colorbox.css}"/>
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.carousel.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.theme.default.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/js_composer/js_composer.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce-layout.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce-smallscreen.css}"/>
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-wishlist/style.css}"/>


    <link rel="stylesheet" th:href="@{/css/custom.css}"/>
    <link rel="stylesheet" th:href="@{/css/app-orange.css}" id="theme_color"/>
    <link rel="stylesheet" href="" id="rtl"/>
    <link rel="stylesheet" th:href="@{/css/app-responsive.css}"/>
</head>

<body class="page woocommerce-account woocommerce-page woocommerce-view-order">
<div class="body-wrapper theme-clearfix">
    <header id="header" class="header header-style1">

        <div class="widget pull-left" style="margin-left: 300px">
            <div class="widget-inner">
                <div id="lang_sel">
                    <ul class="nav">
                        <li>
                            <a class="lang_sel_sel">
                                <img class="iclflag" title="English" alt="en" th:src="@{/images/icons/en.png}"
                                     width="18" height="12"/> English
                            </a>
                            <ul>
                                <li>
                                    <a th:href="@{/orderdetails(l='en_US')}">
                                        <img class="iclflag" title="English" alt="en" th:src="@{/images/icons/en.png}"
                                             width="18" height="12"/> English
                                    </a>
                                </li>

                                <li>
                                    <a th:href="@{/orderdetails(l='zh_CN')}">
                                        <img class="iclflag" title="中文" alt="ar" th:src="@{/images/icons/ar.png}"
                                             width="18" height="12"/> 中文
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div th:replace="commons/bar::#top"></div>

        <div th:replace="commons/bar::#mid"></div>

        <div th:replace="commons/bar::#bottom"></div>
    </header>

    <div class="listings-title">
        <div class="container">
            <div class="wrap-title">
                <h1 th:text="#{myaccount}">My Account</h1>
                <div class="bread">
                    <div class="breadcrumbs theme-clearfix">
                        <div class="container">
                            <ul class="breadcrumb">
                                <li>
                                    <a href="index.html" th:text="#{home}">Home</a>
                                    <span class="go-page"></span>
                                </li>

                                <li class="active">
                                    <span th:text="#{myaccount}">My account</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div id="contents" role="main" class="main-page  col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="post-6 page type-page status-publish hentry">
                    <div class="entry">
                        <div class="entry-content">
                            <header>
                                <h2 class="entry-title" th:text="#{myaccount}">My Account</h2>
                            </header>

                            <div class="entry-summary">
                                <div class="woocommerce">
                                    <div th:replace="commons/account::#side(actUrl='details')"></div>

                                    <div class="woocommerce-MyAccount-content">
                                        <!--订单号  订单日期  订单状态-->
                                        <p>
                                            [[#{ordernumber}]] #
                                            <mark class="order-number"><span th:text="${order.oid}"></span></mark>
                                            [[#{wasplaceon}]]
                                            <mark class="order-date"><span
                                                    th:text="${#calendars.format(order.ordertime,'yyyy/MMM/dd')}"></span>
                                            </mark>
                                            [[#{andiscurrently}]]
                                            <mark class="order-status">
                                                <span th:if="${order.state == 0}" th:text="未付款"></span>
                                                <span th:if="${order.state == 1}" th:text="等待发货"></span>
                                                <span th:if="${order.state == 2}" th:text="等待收货"></span>
                                                <span th:if="${order.state == 3}" th:text="订单已完成"></span>
                                            </mark>

                                        </p>

                                        <h2 th:text="#{orderdetail}">Order Details</h2>

                                        <table class="shop_table order_details">
                                            <thead>
                                            <tr>
                                                <th class="product-name" th:text="#{product}">Product</th>
                                                <th class="product-total" th:text="#{total}">Total</th>
                                            </tr>
                                            </thead>

                                            <tbody>
                                            <!--订单项详情-->
                                            <tr class="order_item" th:each="i:${order.getItems()}">
                                                <td class="product-name">
                                                    <a th:href="'/simpleproduct/'+${i.pid}"><span
                                                            th:text="${i.product.getPname()}"></span></a>
                                                    <strong class="product-quantity">× <span
                                                            th:text="${i.count}"></span> </strong>
                                                </td>

                                                <td class="product-total">
															<span class="amount">
																￥<span th:text="${i.getSubtotal()}"></span>
															</span>
                                                </td>
                                            </tr>
                                            </tbody>

                                            <tfoot>
                                            <!--订单总额-->
                                            <tr>
                                                <th scope="row">[[#{subtotal}]]:</th>

                                                <td>
                                                    ￥<span th:text="${order.total}"></span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th scope="row">[[#{payment}]]</th>

                                                <td th:if="${order.pmethod!=null}">
                                                    <span th:if="${order.pmethod=='cheque'}" th:text="支票付款"></span>
                                                    <span th:if="${order.pmethod=='cod'}" th:text="货到付款"></span>
                                                    <span th:if="${order.pmethod=='paypal'}" th:text="贝宝"></span>

                                                </td>
                                                <td th:if="${order.pmethod==null}"><span> 尚未支付</span></td>
                                            </tr>

                                            <tr>
                                                <th scope="row" th:text="#{total}">Total:</th>

                                                <td>
                                                    ￥<span th:text="${order.total}"></span>
                                                </td>
                                            </tr>
                                            </tfoot>
                                        </table>

                                        <header>
                                            <h2>[[#{customerdetails}]]</h2>
                                        </header>

                                        <table class="shop_table customer_details">

                                            <tbody>
                                            <!--订单用户信息-->
                                            <tr>
                                                <th class="title" th:text="#{usern}">Username:</th>
                                                <td>
                                                    <span th:text="${order.getUser().getUsername()}"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="title" th:text="#{emailaddress}">Email:</th>
                                                <td>
                                                    <span th:text="${order.getUser().getEmail()}"></span>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th class="title" th:text="#{tel}">Telephone:</th>
                                                <td>
                                                    <span th:text="${order.getUser().getPhone()}"></span>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>

                                        <header class="title">
                                            <h3>Billing Address</h3>
                                        </header>

                                        <address th:if="${order.total!=null}">
                                            <span th:text="${order.address}"></span><br/>

                                        </address>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- DIALOGS -->

    <div th:replace="commons/bar::#login_form"></div>

    <a id="etrostore-totop" href="#"></a>

    <script type="text/javascript" th:src="@{js/jquery/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery/jquery-migrate.min.js}"></script>
    <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery/js.cookie.min.js}"></script>

    <!-- OPEN LIBS JS -->
    <script type="text/javascript" th:src="@{js/owl-carousel/owl.carousel.min.js}"></script>
    <script type="text/javascript" th:src="@{js/slick-1.6.0/slick.min.js}"></script>

    <script type="text/javascript" th:src="@{js/yith-woocommerce-compare/jquery.colorbox-min.js}"></script>
    <script type="text/javascript" th:src="@{js/isotope/isotope.js}"></script>
    <script type="text/javascript" th:src="@{js/fancybox/jquery.fancybox.pack.js}"></script>
    <script type="text/javascript" th:src="@{js/sw_woocommerce/category-ajax.js}"></script>
    <script type="text/javascript" th:src="@{js/sw_woocommerce/jquery.countdown.min.js}"></script>
    <script type="text/javascript" th:src="@{js/js_composer/js_composer_front.min.js}"></script>

    <script type="text/javascript" th:src="@{js/plugins.js}"></script>
    <script type="text/javascript" th:src="@{js/megamenu.min.js}"></script>
    <script type="text/javascript" th:src="@{js/main.min.js}"></script>

    <script type="text/javascript">
        var sticky_navigation_offset_top = $("#header .header-bottom").offset().top;
        var sticky_navigation = function () {
            var scroll_top = $(window).scrollTop();
            if (scroll_top > sticky_navigation_offset_top) {
                $("#header .header-bottom").addClass("sticky-menu");
                $("#header .header-bottom").css({"top": 0, "left": 0, "right": 0});
            } else {
                $("#header .header-bottom").removeClass("sticky-menu");
            }
        };
        sticky_navigation();
        $(window).scroll(function () {
            sticky_navigation();
        });

        $(document).ready(function () {
            $(".show-dropdown").each(function () {
                $(this).on("click", function () {
                    $(this).toggleClass("show");
                    var $element = $(this).parent().find("> ul");
                    $element.toggle(300);
                });
            });
        });
    </script>

</body>
</html>